<template>
<div>
    <el-dialog class="dialog-detail" :visible.sync="visible" title="订单详情" :close-on-click-modal="true" :close-on-press-escape="false" width="1200px">
        <div class="box info-order bgf info-box">
            <el-row type="flex" justify="space-between">
                <el-col>
                    <label>门票:</label>
                    <span>{{order.resourceName}}</span>
                </el-col>
                <el-col>
                    <label>是否可退:</label>
                    <span v-if="order.refundNewType == '1'">随时退</span>
                    <span v-else-if="order.refundNewType == '2'">非随时退</span>
                    <span v-else-if="order.refundNewType == '3'">不可退</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col>
                    <label>订单号:</label>
                    <span>{{order.orderNo}}</span>
                </el-col>

                <el-col>
                    <label>联系人:</label>
                    <span>{{order.contactsName ?  order.contactsName: ""}}</span>
                </el-col>

            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col >
                    <label>数量:</label>
                    <span>{{order.scenicNum}}</span>
                </el-col>
                <el-col >
                    <label>联系电话:</label>
                    <span>{{order.contactMobile}}</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col >
                    <label>支付状态:</label>
                    <span v-if="order.payStatus == '0'">支付状态：未支付</span>
                    <span v-else-if="order.payStatus == '1'">支付状态：已支付</span>
                </el-col>
                <el-col>
                    <label>联系人证件号:</label>
                    <span>{{order.contactIdCard}}</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col >
                    <label>出票状态:</label>
                    <span v-if="order.orderStatus == '0'">票码状态：出票中</span>
                    <span v-else-if="order.orderStatus == '1'">票码状态：已出票</span>
                    <span v-else-if="order.orderStatus == '2'">票码状态：已退票</span>
                    <span v-else-if="order.orderStatus == '3'">票码状态：出票失败</span>
                    <span v-else-if="order.orderStatus == '4'">票码状态：已使用</span>
                    <span v-else-if="order.orderStatus == '5'">票码状态：退票中</span>
                </el-col>
                <el-col>
                    <label>有效期:</label>
                    <span>{{order.validityDate}}</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col >
                    <label>订单金额:</label>
                    <span>￥{{order.orderMoney}}</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col >
                    <label>支付金额:</label>
                    <span>￥{{order.payMoney}}</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col >
                    <label>供应商:</label>
                    <span>{{order.supplierName}}</span>
                </el-col>
            </el-row>
            <el-row type="flex" justify="space-between">
                <el-col >
                    <label>供应商单号:</label>
                    <span>{{order.orderNoThird}}</span>
                </el-col>
            </el-row>
        </div>
        <div class="info-trade bgf">
            <h5>出行人信息</h5>
            <el-table
                    :data="order.passengerList"
                    border
            >
                <el-table-column
                        prop="passengerName"
                        label="姓名"
                        align="center"
                        >
                </el-table-column>
                <el-table-column
                        prop="passengerPhone"
                        label="联系电话"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        prop="idCard"
                        align="center"
                        label="证件号">
                </el-table-column>
            </el-table>
        </div>
     <!--   <div class="info-trade bgf">
            <h5>票码信息</h5>
            <el-table
                    :data="order.tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="凭证码"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="name"
                        align="center"
                        label="状态">
                </el-table-column>
            </el-table>
        </div>-->
       <!-- <div class="info-trade bgf">
            <h5>相关短信</h5>
            <el-table
                    :data="tableData"
                    border>
                <el-table-column
                        prop="date"
                        label="短信内容"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="name"
                        align="center"
                        label="发送时间"
                >
                </el-table-column>
                <el-table-column
                        prop="address"
                        align="center"
                        label="状态">
                </el-table-column>
                <el-table-column
                        prop="address"
                        align="center"
                        label="操作">
                </el-table-column>
            </el-table>
        </div>-->
    </el-dialog>
    <handle-log ref="logDetail" v-if="showLog" :data="logList"></handle-log>
    <amount-detail ref="amountDetail" v-if="showAmountDetail" :data="payDetail"></amount-detail>
    <order-out-group ref="outgroupDialog" v-if="showGroupDialog" :id="id" :status="order.outGroupStatus" :type="'customization'"></order-out-group>
</div>
</template>

<script>
import HandleLog from './order-log'
import orderOutGroup from './order-outgroup'
import AmountDetail from './order-amount-detail'
export default {
  props: {
    id: String
  },
  components: {
    HandleLog,
    orderOutGroup,
    AmountDetail
  },
  data () {
    return {
      order: {
        passengerList: []

      },
      visible: false,
      customization: [],
      payDetail: {},
      destinationList: [],
      departList: [],
      logList: [],
      showLog: false,
      showAmountDetail: false,
      showGroupDialog: false,
      totalRetailAmount: 0,
      totalSettleAmount: 0,
      contract: '',
      showContract: ''
    }
  },
  methods: {
    init () {
      this.getDetail()
    },
    getDetail () {
      this.$http
        .get(`/order/getOrderDetail/${this.id}`)
        .then(({ data: res }) => {
          this.visible = true
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          console.log('order', res)
          this.order = res.data
          console.log('order', this.order)
        }).catch(() => {})
    },

    outGroup () {
      this.showGroupDialog = true
      this.$nextTick(() => {
        this.$refs.outgroupDialog.init()
      })
    },
    showLogDialog () {
      this.showLog = true
      this.$nextTick(() => {
        this.$refs.logDetail.init()
      })
    },
    showAmountDialog () {
      if (this.payDetail) {
        this.showAmountDetail = true
        this.$nextTick(() => {
          this.$refs.amountDetail.init()
        })
      } else {
        this.$message({
          message: '无支付详情',
          type: 'warning',
          duration: 800,
          onClose: () => {}
        })
      }
    }
  }
}
</script>

<style lang="scss">
.dialog-detail {
    label{
        white-space: nowrap;
    }
    .star {
        position:relative;
        &::before {
            content: '*';
            color: #F56C6C;
            margin-right: 4px;
        }
    }
    .mlr16 {
        margin-left: 16px;
        margin-right: 16px;
    }

    .el-dialog__header {
        padding: 20px 20px 30px;
        background-color: #DBEDF6;
    }
    .float-right {
        position: absolute;
        right: 51px;
        top: 90px;
        a {
            display: block;
            width: 52px;
            height: 48px;
            text-align: center;
            color: #000000!important;
            background-color: #fff;
            font-size: 14px;
            border: 1px solid #D9D9D9;
            text-decoration: none;
            cursor: pointer;
        }
        .contract {
            padding: 0px 10px;
            margin-bottom: 10px;
        }
        .outGroup {
            line-height: 48px;
        }
    }
    .el-dialog__body {
        position:relative;
        background-color: #eff3f3;
        padding: 0px 0 30px !important;

        .bgf {
            background-color: #fff;
        }

        .bg-grey {
            background-color: #fafafa;
        }

        .box {
            margin: 0 20px;
        }

        .info-box {
            padding: 16px 20px;
        }
        .supplierPhone {
            margin-top: -14px;
            margin-bottom: 20px;
            min-height: 10px;
            color: #999999;
            padding-left: 90px;
        }
        .info-order .el-row,
        .info-customization .el-row {
            margin-bottom: 16px;

            label {
                display:inline-block;
                width: 100px!important;
                color: #999999;
                margin-right: 14px;
            }

            span {
                font-weight: bold;
            }
        }

        h5 {
            padding: 16px 20px 15px 0;
            font-size: 16px;
            border-bottom: 1px solid #e9e9e9;
            margin: 0;
            margin-bottom: 10px;
        }

        .row-bg {
            height: 110px;
            border-top: 1px solid #e9e9e9;
            border-left: 1px solid #e9e9e9;
            border-radius: 3px 0px 0px 3px;

            .v {

                font-weight: 500;
            }
        }

        .row-btn {
            margin-top: 10px;
            margin-bottom: 10px;
            padding: 15px 20px 20px;
            height: 60px;
            background-color: #fff;

            .log {
                color: #3753c6;
                text-decoration: underline;
                cursor: pointer;
            }

            .status {
                font-size: 20px;
                margin-left: 20px;
            }
        }

        .info-trade {
            padding: 10px ;
            margin: 10px 20px;
        }

        .btn {
            margin-left: 8px;
            color: #3753c6;
        }

        .btn-detail {
            cursor: pointer;
        }
    }
}
</style>
